<template>
  <div>
    <el-button type="lightprimary" @click="clickSelect">{{ clinic }}</el-button>
    <select-department
      v-if="dialogVisible"
      id="selectDepartments"
      :clinic-list="clinicList"
      :dialog-visible="dialogVisible"
      :show="show"
      :clinic-array="clinicArray"
      @select="selectOk"
      @beforeclose="beforeclose"
    ></select-department>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import SelectDepartment from '@/components/yiya/SelectDepartment'

export default {
  components: {
    SelectDepartment,
  },
  data() {
    return {
      clinicList: [],
      dialogVisible: false,
      show: true,
      clinicArray: [],
    }
  },
  computed: {
    ...mapGetters(['clinic']),
  },
  beforeMount() {
    this.clinicList = JSON.parse(localStorage.getItem('ClinicList'))[0].children
  },
  methods: {
    //关闭回调
    beforeclose(e) {
      this.dialogVisible = e
    },
    //点击选择门诊
    clickSelect() {
      this.clinicArray = JSON.parse(localStorage.getItem('selectClinic'))
      this.dialogVisible = true
    },
    //选中以后的回调
    selectOk(val) {
      localStorage.setItem('selectClinic', JSON.stringify(val))
      this.$store.dispatch('getClinic', val[1]).then(() => {
        this.dialogVisible = false
        location.reload()
      })
    },
  },
}
</script>

<style lang="scss" scoped>
#selectDepartments >>> .el-dialog {
  margin-top: 36vh !important;
  height: 29%;
}
#selectDepartments >>> .el-input__inner {
  display: none;
}
#selectDepartments >>> .el-input__suffix {
  display: none;
}
.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}
.el-icon-arrow-down {
  font-size: 12px;
}
</style>
